<template>
    <div class="video">
        <div class="videolist" v-for="item in videos" :key="item.id">
            <div class="videoshow" >
                <video  preload='none' muted='true' 
                :src="item.video.url"
                :poster="item.video.imgUrl"
                controls
                ></video>
            </div>
            <div class="video-info">
                     <span>杨二狗</span> <van-icon name="good-job-o" badge="9" size="20"/> <van-icon name="more-o" badge="90" size="20"/> <van-icon name="share-o" size="20" />
            </div>
        </div>
    </div>
</template>
<script>
import Vue from 'vue';
import { Icon } from 'vant';
import uri from '@/config/uri'
Vue.use(Icon);
export default {
    date(){
        return {
            videos:{}
        }
    },
    created(){
        this.$http.get(uri.videolist).then(req=>{
            console.log(req);
            this.videos=req.data.feeds
            console.log(this.videos);
        })
    }


}
</script>
<style scoped>
.video {
    margin-top:70px;margin-bottom: 50px;
}
.videoshow {
    width:100%;
    height: 211px;
}
video {
    width:100%;
    height: 211px;
}
.video-info {
    height: 46px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
</style>